<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script th:src="@{/webjars/jquery/3.0.0/jquery.js}"></script>
    <script th:src="@{/js/jquery.form.min.js}"></script>
    <link th:href="@{/css/ydui.css}" rel="stylesheet">
    <script th:src="@{/js/ydui.flexible.js}"></script>
    <script th:src="@{/js/jquery.cityselect.js}"></script>
    <script th:src="@{/js/iScroll.js}"></script>
    <script th:src="@{/js/Mdate.js}"></script>
    <script type="javascript">
        !function() {
            $("#city_1").citySelect({
                prov:"北京",
                nodata:"none"
            });
        }();
    </script>
</head>
<body >
<section class="g-flexview">
    <header class="m-navbar">
        <a href="#nogo" class="navbar-item" onclick="finishPage('noRefresh');return false;"><i class="back-ico"></i>返回</a>
        <div class="navbar-center"><span class="navbar-title">修改个人资料</span></div>
    </header>
    <!--/*@thymesVar id="user" type="com.example.models.User"*/-->
    <section class="g-scrollview">
        <div class="m-cell">
            <form action="/app/submit_modify_userinfo/" method="post" id="modify_form">
                <input type="hidden" name="user_id" th:value="${user.id}">
                <div class="cell-item" style="height: 1.1rem;">
                    <div class="cell-left"><font style="color: red;">*</font>用户名：</div>
                    <div class="cell-right">
                        <input type="text" class="cell-input" name="username" th:value="${user.username}" placeholder="长度>=3 并且 <=12"></input>
                    </div>
                </div>
                <div class="cell-item" style="height: 1.1rem;">
                    <div class="cell-left">个人简介：</div>
                    <div class="cell-right">
                        <input type="text" class="cell-input" name="brief" th:value="${user.brief == null ? '' : user.brief}"></input>
                    </div>
                </div>
                <div class="cell-item">
                    <div class="cell-left" style="height: 1.1rem;">学校所在地区：</div>
                    <div class="cell-right">
                        <div id="city_1" style="margin-right: 1rem;">
                            <select onchange="change_school();" class="prov" name="province" style="margin-right: .3rem;width: 1.5rem;height: 0.7rem;text-align-last: center;border-radius: 0.2rem;"></select>
                            <select onchange="get_school_data(2);" class="city" name="city"  disabled="disabled" style="width: 2rem;height: 0.7rem;text-align-last: center;border-radius: 0.2rem;"></select>
                        </div>
                        <pre style="display: none;">
                            <script th:inline="javascript">
                                    var prov = [[${user.school != null ? user.school.province : ''}]];
                                    if(prov && prov != '') {
                                        $("#city_1").citySelect({prov: prov});
                                    }else{
                                        $("#city_1").citySelect({required:false});
                                    }
                            </script>
                        </pre>
                    </div>
                </div>
                <div class="cell-item" style="height: 1.1rem;">
                    <div class="cell-left"><font style="color: red;">*</font>学校名称：</div>
                    <div class="cell-right">
                        <select id="school" name="school_name" style="width: 4rem;height: 0.7rem;text-align-last: center;border-radius: 0.2rem;margin-right: 0.9rem;">
                            <option value="">请选择</option>
                            <option th:if="${user != null and user.school != null}" th:value="${user.school.eduName}" th:text="${user.school.eduName}" selected></option>
                        </select>
                    </div>
                </div>
                <div class="cell-item" style="height: 1.1rem;">
                    <div class="cell-left">家乡：</div>
                    <div class="cell-right cell-arrow">
                        <input type="text" class="cell-input" readonly id="J_Address" placeholder="家乡地址" name="home_town" th:value="${user == null} ? '' : ${user.getPCA()}"/>
                    </div>
                </div>
                <div class="cell-item" style="height: 1.1rem;">
                    <div class="cell-left"><font style="color: red;">*</font>出生日期：</div>
                    <div class="cell-right">
                        <input style="width: 3.5rem;height: 0.7rem;border-radius: 0.2rem;text-align: center;margin-right: 1.2rem;" type="text" id="dateSelectorOne" name="birthday" th:value="${user.birthday != null ? user.getBirthdayStr() : ''}" placeholder="选择日期">
                    </div>
                </div>
                <div class="cell-item" style="height: 1.1rem;">
                    <div class="cell-left"><font style="color: red;">*</font>性别：</div>
                    <label class="cell-right cell-arrow">
                        <select class="cell-select">
                            <option value="">请选择性别</option>
                            <option value="0" th:selected="${user.gender.ordinal() == 0}">男</option>
                            <option value="1" th:selected="${user.gender.ordinal() == 1}">女</option>
                        </select>
                    </label>
                </div>
                <div class="cell-item" style="height: 1.1rem;">
                    <div class="cell-left"><font style="color: red;">*</font>电话：</div>
                    <div class="cell-right">
                        <input type="text" class="cell-input" name="mobile" th:value="${user.mobile == null} ? '' : ${user.mobile}"></input>
                    </div>
                </div>
            </form>
        </div>
        <input type="button" class="btn-block btn-danger" value="保存修改" onclick="submit_modify();return false;"/>
    </section>
</section>
<script id="school_options" type="text/html">
    <option value="">请选择</option>
    {{each schools as school}}
        <option value="{{school.school_name}}">{{school.school_name}}</option>
    {{/each}}
</script>
<script src="http://static.ydcss.com/libs/arttemplate/template.js"></script>
<script src="http://static.ydcss.com/uploads/ydui/ydui.citys.js"></script>
<script th:src="@{/js/ydui.js}"></script>
<script th:inline="javascript">
    var year = [[${user.getBirthYear()}]];
    var month = [[${user.getBirthMonth()}]];
    var day = [[${user.getBirthDay()}]];
    new Mdate("dateSelectorOne", {
        beginYear: year == '' ? '1970' : year,
        beginMonth: month,
        beginDay: day,
        format: "-"
    })


    var change = 1;

    function change_school() {
        if (change > 1) {
            $("#school").empty();
            $("#school").append("<option value=\"\">请选择</option>\n");
        }
        change ++;
    }

    $(function () {
        get_school_data(1);
    });

    function get_school_data(time){
        var province = $("#city_1").find("select[name='province']").val();
        var city = $("#city_1").find("select[name='city']").val();
        if(province != '' && city != '') {
            var url = "/background/get_educations_info/?province=" + province + "&city=" + city;
            $.get(url, function (res) {
                var html = template('school_options', {schools: res});
                if (time != 1) {
                    $("#school").empty();
                }
                $("#school").append(html);
            });
        }else{
            change_school();
        }
    }

    !function () {
        var delivery = [[${delivery_address}]];
        var $address = $('#J_Address');

        if(delivery != null){
            $address.citySelect({
                provance: delivery.province,
                city: delivery.city,
                area: delivery.area
            });
        }else{
            $address.citySelect();
        }
        $address.on('click', function () {
            $address.citySelect('open');
        });

        $address.on('done.ydui.cityselect', function (ret) {
            /* 省：ret.provance */
            /* 市：ret.city */
            /* 县：ret.area */
            $(this).val(ret.provance + ' ' + ret.city + ' ' + ret.area);
        });
    }();


    function checkTel(tel){
        return /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(tel);
    }

    function checkPhone(phone){
        return /^1[34578]\d{9}$/.test(phone);
    }

    function checkForm(){
        var tar_form = $("#modify_form");
        var birthday = tar_form.find("input[name='birthday']");
        var username = tar_form.find("input[name='username']").val();
        var mobile = tar_form.find("input[name='mobile']").val();
        var school_name = $("#school").val();
        if(username == '' || mobile == '' || school_name == '' || birthday == '') {
            return false;
        }
        if(username.length < 3 || username.left() > 12){
            return false;
        }
        if(!(checkPhone(mobile) || checkTel(mobile))){
            return false;
        }
        return true;
    }

    function finishPage(op){
        window.modifyUserInfo.finishActivity(op);
    }

    function submit_modify() {
        if(checkForm()) {
            $("#modify_form").ajaxSubmit(function (res) {
                if (res == "success") {
                    finishPage("refresh");
                } else if(res == 'repeat'){
                    YDUI.dialog.alert('用户名重复！');
                } else{
                    YDUI.dialog.alert('保存失败！');
                }
            });
        }else{
            YDUI.dialog.alert("请检查输入");
        }
    }
</script>
</body>
</html>